<!-- 设置 -->
<template>
  <div class="setting">
    <!-- 卡片容器 -->
    <el-card class="box-card">
      <!-- 标签页 -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="角色管理" name="first">
          <!-- 按钮 -->
          <el-button type="primary" size="small" @click="newRole"><i class="el-icon-plus"></i>新增角色</el-button>
          <!-- 表格 -->
          <el-table :data="list" style="width: 100%" border>
            <!-- 使用 type="index" 可以自定义索引，则该列为索引列，自动按接收到的数据 1，2... 排下去-->
            <el-table-column label="序号" type="index" width="180">
            </el-table-column>
            <el-table-column prop="name" label="角色名" sortable width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述" sortable>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <!-- 当前行数据源 scope -->
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="openRole(scope.row)">分配权限</el-button>
                <el-button type="text" size="small" @click="edit_btn(scope.row)">修改</el-button>
                <el-button type="text" size="small" @click="del_btn(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页 -->
          <!-- size-change 页容量发生改变后会发生的事件 -->
          <!-- current-change 当前页发生改变后会触发的事件 比如：由 第一页 变为 第二页 那么页面上的内容也会改变-->
          <!-- :current-page 当前页 -->
          <!-- :page-sizes 页容量集合 -->
          <!-- :page-size  选中的页容量-->
          <!-- layout 分页组件的布局 -->
          <!-- 数据总条数 -->
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="sizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <!-- form表单 -->
          <el-form disabled :model="form" label-width="100px" class="myform">
            <el-form-item label="企业名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="公司地址">
              <el-input v-model="form.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="公司电话">
              <el-input v-model="form.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
      <!-- 页面 -->
    </el-card>
    <!-- 动态修改面板标题 -->
    <el-dialog :title="this.Roleform.id ? '编辑角色' : '新增角色'" :visible.sync="dialogShow">
      <el-form :model="Roleform" label-width="100px">
        <el-form-item label="角色名称">
          <el-input v-model="Roleform.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="Roleform.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close_btn">取 消</el-button>
        <el-button type="primary" @click="sub_btn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限组件 -->
    <setrole :roleName="roleName" :roleShow.sync="roleShow" ref="myrole"></setrole>
  </div>
</template>

<script>
// 导入权限分配的组件
import setrole from './components/setrole.vue'
import { getRoleListApi, updateRoleApi, newRoleApi, delRoleApi, getCompanyApi } from '@/api/setting'
// 导入辅助函数
import { mapGetters } from 'vuex'
export default {
  components: {
    setrole
  },
  data () {
    return {
      activeName: 'first',
      //角色列表  []数组{}对象
      list: [
      ],
      // 当前页
      current: 1,
      // 页容量集合
      sizes: [2, 5, 10, 15],
      //每页要展示的条数
      pagesize: 2,
      // 总数据条数
      total: 0,
      // 公司信息
      form: {},
      // 控制面板显示隐藏
      dialogShow: false,
      // 当前编辑角色的信息
      Roleform: {},
      // 当前分配的角色名称
      roleName: '',
      // 控制权限分配面板的显示与隐藏
      roleShow: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  methods: {
    // 打开分配权限面板
    openRole (row) {
      this.roleShow = true
      // 设置当前点击的要分配的角色名称
      this.roleName = row.name
      // 把选中条目的id传给分配窗口的组件中的函数
      this.$refs.myrole.getRightById(row.id)
    },
    async getRoleList () {
      const res = await getRoleListApi({
        page: this.current,
        // 告诉后端每页要展示多少条
        pagesize: this.pagesize
      })

      // 保存角色列表数据
      this.list = res.data.rows

      // 将返回的数据总数保存
      this.total = res.data.total
      console.log(res)
    },
    // 当页容量发生改变时
    handleSizeChange (size) {
      // size：得到当前每页条目数（页容量）
      // 保存当前选中的页容量
      this.pagesize = size
      // 根据当前选中容量重新请求数据
      this.getRoleList()
    },
    // 当翻页时
    handleCurrentChange (page) {
      // page:当前点击的页码
      // 保存当前选中的页码
      this.current = page
      // 根据当前选中的页码，重新请求角色数据
      this.getRoleList()
    },
    edit_btn (row) {
      this.dialogShow = true
      // 将当前操作行的数据源保存起来
      // 创建一个新的对象，将row中所有的赋值添加到新对象中
      // 新对象有row的所有属性，但修改不会影响的数据源 （浅拷贝）
      this.Roleform = { ...row }
    },
    close_btn () {
      this.dialogShow = false
      // 清除数据 解决bug:dialog标签框的标题问题
      this.Roleform = {}
    },
    // dialog点击确定修改/新增数据
    async sub_btn () {
      //通过是否存在RoleForm.id判断是否修改 / 新增
      if (this.Roleform.id) {
        // 编辑操作
        await updateRoleApi(this.Roleform)
      } else {
        const res = this.getRoleList()
        // 新增
        await newRoleApi(this.Roleform)
      }
      // 更新列表
      this.getRoleList()
      //告知用户操作成功
      this.$message.success(this.Roleform.id ? '修改角色信息成功' : '新增角色信息成功')
      //关闭面板
      this.dialogShow = false
      // 清除数据
      this.Roleform = {}
    },
    // 新增角色
    newRole () {
      this.dialogShow = true
    },
    // 删除角色
    del_btn (row) {
      //询问用户是否真的删除
      this.$confirm('您是否要删除当前角色').then(async () => {
        // 是  执行
        console.log(row)
        await delRoleApi(row.id)
        // 进入此处则表示开始删除
        // 总条数 - 1
        // 当前一共可以分 Newpagesize 页  
        // ( 当前总数据可以分为多少页 = 向上取整操作((每删除一次，总数据条数-1)  /  一页要有 pagesize 条数据)
        // 向上取整就可以保留当前表格的最后一行数据
        const Newpagesize = Math.ceil((this.total - 1) / this.pagesize)
        // 当前页页码 是否 大于 目前最新的可以分的页码数 ? 如果满足条件，则要把最新的页码数展示
        this.current = this.current > Newpagesize ? Newpagesize : this.current
        // 删到最后一页 防止把页码都删没，强制保留第一页
        this.current = this.current < 1 ? 1 : this.current
        this.$message.success('删除成功')
        // 然后重新请求数据
        this.getRoleList()
      }
      ).catch(() => { console.log('用户取消') })
    },
    // 获取公司信息
    async getCompany () {
      const res = await getCompanyApi(this.userInfo.companyId)
      this.form = res.data
      console.log(res)
    }


  },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getRoleList()
    // 得到公司信息
    this.getCompany()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.setting {
  .box-card {
    margin: 20px;

    .el-pagination {
      text-align: right;
      margin-top: 20px;
    }

    .myform {
      width: 450px;
      margin-left: 100px;
    }
  }

}
</style>
